<template>
<div>
  <el-table
      :data="shop"
      stripe
      style="width: 100%">
    <el-table-column
        prop="flashId"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="goodsName"
        label="商品名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="date"
        label="活动时间"
        width="160px">
    </el-table-column>
    <el-table-column
        prop="flashNum"
        label="已秒杀量"
        width="250px"
        align="center">
    </el-table-column>
    <el-table-column
        prop="state"
        label="状态"
        width="300px"
        align="center">
    </el-table-column>
    <el-table-column
        label="操作">
      <template slot-scope="scope">
        <el-button @click="tagOpen(scope.row)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(scope.row)" circle></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="秒杀修改" :visible.sync="tagFlag">
    <el-form :model="form">
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input
            v-model="form.goodsName"
            :disabled="true">
        </el-input>
      </el-form-item>
      <el-form-item label="开始时间" :label-width="formLabelWidth">
        <el-date-picker
            v-model="form.flashStartTime"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" :label-width="formLabelWidth">
        <el-date-picker
                v-model="form.flashEndTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="秒杀人数" :label-width="formLabelWidth">
        <el-input v-model="form.flashNum" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="秒杀价格" :label-width="formLabelWidth">
        <el-input v-model="form.flashPrice" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="库存" :label-width="formLabelWidth">
        <el-input v-model="form.flashStock" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="秒杀规则" :label-width="formLabelWidth">
        <el-input
            type="textarea"
            placeholder="请输入规则"
            v-model="form.flashDesc">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="tagFlag = false">取 消</el-button>
      <el-button type="primary" @click="update">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "secKill",
  inject:['reload'],
  data(){
  return{
    shop: [],
    formLabelWidth:'120px',
    form:{
      flashId:'',
      goodsId:'',
      goodsName:'',
      flashStartTime:'',
      flashEndTime:'',
      flashNum:'',
      flashPrice:'',
      flashStock:'',
      flashDesc:'',
    },
    tagFlag:false,
    currentPage:1,
    flashIds:'',
  }
  },
  mounted() {
    this.listForm();
  },
  methods:{
    tagOpen(row){
      this.form.flashId=row.flashId;
      this.form.goodsName=row.goodsName;
      this.form.flashStartTime=row.flashStartTime;
      this.form.flashEndTime=row.flashEndTime;
      this.form.flashNum=row.flashNum;
      this.form.flashPrice=row.flashPrice;
      this.form.flashStock=row.flashStock;
      this.form.flashDesc=row.flashDesc;
      this.form.goodsId=row.goodsId;
      this.tagFlag=true;
    },
    update(){
      this.$axios.post('/api/flash/edit',{flashId:this.form.flashId,flashStartTime:this.form.flashStartTime,flashEndTime:this.form.flashEndTime,goodsId:this.form.flagoodsId,flashPrice:this.form.flashPrice,flashStock:this.form.flashStock,flashDesc:this.form.flashDesc}).then((res)=>{
        this.listForm();
        this.tagFlag=false;
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
      });
    },
    open(row) {
      this.flashId=row.flashId;
      this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deletes();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deletes(){
      let deleteArr=[];
      deleteArr.push(this.flashId);
      this.$axios.post('api/flash/delete',[...deleteArr]).then((res)=>{
        console.log(res.data);
        deleteArr=[];
        this.listForm();
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
    },
    listForm(){
      this.$axios.post('/api/flash/list',{page:this.currentPage}).then((res)=>{
        let list=res.data.data;
        console.log(list);
        let arr=[];
        list.forEach((item)=>{
          arr.push(item.goods);
        });
        for(let i=0;i<list.length;i++){
          list[i].goodsName=arr[i].goodsName;
          list[i].flashPrice=arr[i].flashPrice;
        }
        list.forEach((item,index)=>{
          this.shop.push(item);
          this.shop[index].date=item.flashStartTime+' '+item.flashEndTime;
          if(item.flashStatus==0){
            this.shop[index].state='未开始';
          }else if(item.flashStatus==1){
            this.shop[index].state='进行中';
          }else if(item.flashStatus==2){
            this.shop[index].state='进行中(已售罄)';
          }else if(item.flashStatus==3){
            this.shop[index].state='已结束';
          }
        });
      })
    },
  }
}
</script>

<style scoped>

</style>